
<template>
<div>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="下单时间"
      width="220">
      <template slot-scope="scope">
        <i class="el-icon-time" ></i>
        <span style="margin-left: 10px" >{{scope.row.time }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="超时预计"
      width="220">
      <template slot-scope="scope">
        <span style="color:green;" v-if="scope.row.clock=='0'">未超时：{{scope.row.endTime}}</span>
        <span style="color:red;" v-else>已超时：{{scope.row.endTime}}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="姓名"
      width="220">
      <template slot-scope="scope">
        <span style="" >{{scope.row.userId.name}}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="当前状态"
      width="220">
      <template slot-scope="scope">
        <span style="color:green;" v-if="scope.row.isSend == '0'">待发货</span>
        <span style="color:red;" v-if="scope.row.isSend == '1'">已发货</span>
        <span style="" v-if="scope.row.isSend == '2'">订单已取消</span>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">查看详情</el-button>
        <el-button
          size="mini"
          type="danger"
          v-if="current=='待发货'"
          @click="handleDelete(scope.$index, scope.row)">取消订单</el-button>
        <el-button
          size="mini"
          type="danger"
          v-if="current=='已取消'||current=='已发货'"
          @click="orderDelete(scope.$index, scope.row)">删除订单</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 4, 3]"
      :page-size=" pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="allDataNumber">
    </el-pagination>
  </div>
</template>

<script>
import axios from "axios"
  export default {
    props:["current","getCurrentByOrderformStatistics"],
    created () {
       this.getOrderformA()
       if(this.$route.query.current){
        this.getCurrentByOrderformStatistics(this.$route.query.current)
      }else{
         this.getCurrentByOrderformStatistics("全部订单")
      }
    },
    data() {
      return {
        tableData: [],
        allGoodsData: [],
        count:1,
        pageSize:5,
        currentPage: 1,
        isSend:"0",
        allDataNumber:0,
      }
    },
    watch:{
      current(){
        this.currentPage=1
        this.changePage()
      },
      currentPage(){
        this.changePage()
      },
      pageSize(){
         this.changePage()
       }
    },
    computed:{
    },
    methods: {
      
      changePage(){
        if(this.current=="全部订单"){this.getOrderformA()}
        if(this.current=="待发货"){this.isSend="0";this.getOrderformB()}
        if(this.current=="已发货"){this.isSend="1" ;this.getOrderformB()}
        if(this.current=="已取消"){this.isSend="2" ;this.getOrderformB()}
      },
      getOrderformA(){
        axios
        .get("/orderForms",{
          params:{
            pageSize:this.pageSize,
            currentPage:this.currentPage
            }})
        .then(res=>{
        this.tableData = res.data.limitData.map((item,index,arr)=>{
          const endItem = item.time.split(/[:\/]/)
          const endItemDate = new Date(endItem[0],endItem[1],endItem[2],endItem[3],endItem[4],(parseInt(endItem[5])+600))
          let endDate = endItemDate
          let nowDate = this.getTimeNow()
          item.endTime = `${endItemDate.getFullYear()}/${endItemDate.getMonth()}/${endItemDate.getDate()}/${endItemDate.getHours()}:${endItemDate.getMinutes()}:${endItemDate.getSeconds()}`
          if((nowDate-endDate)/60000>10 && item.isSend == "0"){
            const _id = item._id
            const clock = "1"
            axios.post("/orderForms",{_id,clock}).then(res => {});
          }
          return item
        })
        this.allDataNumber = res.data.allDataNumber
      })
      },
      getOrderformB(){
        axios
        .get("/orderForms",{
          params:{
            pageSize:this.pageSize,
            currentPage:this.currentPage,
            isSend:this.isSend
            }})
        .then(res=>{
        this.tableData = res.data.limitData.map((item,index,arr)=>{
          const endItem = item.time.split(/[:\/]/)
          const endItemDate = new Date(endItem[0],endItem[1],endItem[2],endItem[3],endItem[4],(parseInt(endItem[5])+600))
          item.endTime = `${endItemDate.getFullYear()}/${endItemDate.getMonth()}/${endItemDate.getDate()}/${endItemDate.getHours()}:${endItemDate.getMinutes()}:${endItemDate.getSeconds()}`
          return item
        })
        this.allDataNumber = res.data.allDataNumber
      })
      },
      handleEdit(index, row) {
        this.$router.push({ path: "/orderformGoodsList", query: { _id:this.tableData[index]._id } })
      },
      handleDelete(index, row) {
        if(row.isSend=="0"){
          axios.post("/orderForms",{_id:row._id,isSend:"2"}).then(res=>{
        this.changePage()   
          })
        }
      },
      orderDelete(index, row) {
          axios.post("/orderForms",{_id:row._id,isSend:"3"}).then(res=>{
        this.changePage() 
          })
      },
      handleSizeChange(val) {
        this.pageSize=val
      },
      handleCurrentChange(val) {
        this.currentPage=val
      },
      getTimeNow(){
        let time = new Date();
        let year = time.getFullYear()
        let mouth = time.getMonth()+1
        let day = time.getDate()
        let hour = time.getHours()
        let minute = time.getMinutes()
        let second = time.getSeconds()
        let nowTime = new Date(year,mouth,day,hour,minute,second)
        return nowTime
      },
    }
  }
</script>